<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header-box" :key="refreshKey" :style="{ height: bgHeight }">
			<movable-area class="move-area">
				<movable-view class="movable-view" :scale="true" :scale-min="1" direction="all">
					<img id="tp-bg" class="top-bg" @load="onImageLoad" src="/static/index/topBg.png">
					<view class="skim-box">浏览量：{{ skimNum || 0 }}</view>
					<!-- <view class="legend-box">
						<view class="legend-item" v-for="(item, index) in legendList" :key="index">
							<img :src="item.icon" class="lenged-icon">
							<text>{{ item.desc }}</text>
						</view>
					</view> -->
					<view class="img-icon-box map-icon" v-for="(item,index) in initMapList" @click="showDetail(item)" :key="index"
						:style="item.styleObj">
						<img :src="enums[item.iconColor]" class="img-icon">
						</img>
						<view class="icon-num">{{ Number(item.serialNumber) }}</view>
					</view>
				</movable-view>
			</movable-area>
		</view>
		
		<!-- 列表 -->
		<view class="content-list-box">
			<view class="list-box" :key="refreshKey">
				<img class="banner" src="/static/index/banner.jpg" alt="">
				<template v-if="fruitList && fruitList.length > 0">
					<view class="street-box" v-for="(pitem, pindex) in fruitList" :key="pindex">
						<view class="street-title">
							{{ pitem.street }}
						</view>
						<u-cell-group :border="false">
							<u-cell-item v-for="(item, index) in pitem.streetList" :title="item.name" :arrow="false"
								:border-bottom="false" hover-class="none">
								<view @click="showDetail(item)" class="detail-icon" slot="right-icon">
									详情
									<!-- <img src="/static/index/arrow.jpg" class="right-arrow"> -->
								</view>
								<view class="img-icon-box" slot="icon">
									<img :src="enums[item.iconColor]" @click="openMap" class="img-icon">
									</img>
									<view class="icon-num">{{ Number(item.serialNumber) }}</view>
								</view>

							</u-cell-item>
						</u-cell-group>
					</view>
				</template>
				<u-empty v-else text="暂无果园信息" mode="search"></u-empty>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom-box">
			<img class="bottom-bg" src="/static/index/bottomBg.png">
		</view>
		<!-- 弹窗 -->
		<dialogCom v-show="showDialog" :detailObj="info" :showDialog.sync="showDialog"></dialogCom>
	</view>
</template>

<script>
	const locationMap = new Map([
		["三民岛", (index) => {
			const center = ["15", "47"];
			const pointList = [
				[15, 55],
				[15, 42],
				[18, 45],
				[15, 47],
				[15, 50],
				[15, 62],
				[23, 54],
				[13.5, 58],
				[13, 39],
				[9, 36],
				[10, 42],
				[19, 50],
				[10.5, 49],
				[10, 60],
				[11, 54],
				[12.5, 50],
				[12, 40],
				[10, 45],
				[12, 59],

			];
			return {
				pointList,
				center
			}
		}],
		["6涌", (index) => {
			const pointList = [
				[30, 22],
				[23, 25],
				[25, 25],
				[28, 25],
				[33, 25],
				[35, 25],
				[38, 25],
				[42, 25],
				[44, 25],
				[46, 25],
				[50, 20],
			];
			const topLeftPoint = ["10", "24"];
			const topRightPoint = ["10", "24"];
			const bottomLeftPoint = ["20", "26"];
			const bottomRightPoint = ["50", "26"];
			const center = ["30", "25"];
			return {
				pointList,
				topLeftPoint,
				topRightPoint,
				bottomLeftPoint,
				bottomRightPoint,
				center
			}
		}],
		["7涌", (index) => {
			const pointList = [
				[35, 24],
				[30, 26],
				[22.8, 28],
				[50, 22],
				[30.5, 26],
				[29, 23],
				[32, 24],
				[42, 26],
				[41, 24],
				[43, 23],
				[40, 21],
			];
			const topLeftPoint = ["20", "28"];
			const topRightPoint = ["50", "21"];
			const bottomLeftPoint = ["20", "30"];
			const bottomRightPoint = ["50", "23"];
			const center = ["35", "28"];
			return {
				pointList,
				topLeftPoint,
				topRightPoint,
				bottomLeftPoint,
				bottomRightPoint,
				center
			}
		}],
		["8涌", (index) => {
			const topLeftPoint = ["20", "31"];
			const topRightPoint = ["53", "24"];
			const bottomLeftPoint = ["23", "32"];
			const bottomRightPoint = ["53", "26"];
			const center = ["36", "28"];
			const pointList = [
				[40, 28],
				[28, 30],
				[24, 31],
				[48, 25],
				[53, 25],
				[35, 27.5],
				[45, 27],
				[37, 30],
				[44, 31],
				[46, 31.5],
				[29, 32.3],
			];
			return {
				pointList,
				topLeftPoint,
				topRightPoint,
				bottomLeftPoint,
				bottomRightPoint,
				center
			}
		}],
		["9涌", (index) => {
			const pointList = [
				[42, 32],
				[32, 34],
				[28, 34],
				[24, 34],
				[53, 28],
				[50, 30],
				[38, 33],
				[60, 28],
				[57, 29],
				[48, 31.5],
				[38, 33],
			];
			const topLeftPoint = ["24", "33"];
			const topRightPoint = ["58", "26"];
			const bottomLeftPoint = ["25", "36"];
			const bottomRightPoint = ["60", "28"];
			const center = ["42", "30"];
			return {
				pointList,
				topLeftPoint,
				topRightPoint,
				bottomLeftPoint,
				bottomRightPoint,
				center
			}
		}],
		["11涌", (index) => {
			const pointList = [
				[68, 33],
				[32, 41],
				[64, 33],
				[36, 41],
				[55, 36],
				[29, 39],
				[49, 36.5],
				[40, 39],
				[44, 39],
				[60, 35],
				[50, 39],
				[52, 37]
			];
			const topLeftPoint = ["31", "41"];
			const topRightPoint = ["62", "34"];
			const bottomLeftPoint = ["31", "42"];
			const bottomRightPoint = ["62", "35"];
			const center = ["46", "39"];
			return {
				pointList,
				topLeftPoint,
				topRightPoint,
				bottomLeftPoint,
				bottomRightPoint,
				center
			}
		}],
		["13涌", (index) => {
			const pointList = [
				[45, 47],
				[36, 47],
				[51, 44],
				[45, 44],
				[43, 44],
				[50, 44],
				[58, 44],
				[40, 44],
				[54, 44],
				[46, 44],
				[46, 42],
			];
			const topLeftPoint = ["36", "46"];
			const topRightPoint = ["66", "40"];
			const bottomLeftPoint = ["36", "48"];
			const bottomRightPoint = ["66", "42"];
			const center = ["51", "44"];
			return {
				pointList,
				topLeftPoint,
				topRightPoint,
				bottomLeftPoint,
				bottomRightPoint,
				center
			}
		}],
		["14涌", (index) => {
			const pointList = [
				[42, 50],
				[52, 50],
				[47, 50],
				[62, 48],
				[63, 49],
				[40, 48],
				[58, 45],
				[70, 42],
				[54, 52],
				[66, 44],
				[40, 44],
			];
			const topLeftPoint = ["40", "50"];
			const topRightPoint = ["70", "44"];
			const bottomLeftPoint = ["40", "52"];
			const bottomRightPoint = ["70", "47"];
			const center = ["55", "44"];
			return {
				pointList,
				topLeftPoint,
				topRightPoint,
				bottomLeftPoint,
				bottomRightPoint,
				center
			}
		}],
		["16涌", (index) => {
			const pointList = [
				[63, 58],
				[42, 62],
				[47, 60],
				[62, 57],
				[63, 57],
				[40, 70],
				[58, 45],
				[70, 42],
				[54, 52],
				[66, 44],
				[40, 44],
			];
			const topLeftPoint = ["40", "50"];
			const topRightPoint = ["70", "44"];
			const bottomLeftPoint = ["40", "52"];
			const bottomRightPoint = ["70", "47"];
			const center = ["55", "44"];
			return {
				pointList,
				topLeftPoint,
				topRightPoint,
				bottomLeftPoint,
				bottomRightPoint,
				center
			}
		}],
	])

	const randomChoice = () => {
		if (Math.random() < 0.5) {
			return -1;
		} else {
			return 1;
		}
	};
	const enums = {
		red: require('static/index/redMap.png'),
		green: require('static/index/greenMap.png'),
		orange: require('static/index/orangeMap.png'),
	};
	export default {
		data() {
			return {
				showDialog: false,
				enums,
				info: {},
				fruitList: [],
				refreshKey: 0,
				initMapList: [],
				bgHeight: '630px',
				skimNum: localStorage.getItem("skimNum") || 0, // 浏览量
				legendList: [
					{ icon: enums['red'], desc: '可批发' },
					{ icon: enums['green'], desc: '可批发、采摘' },
				],
				shareObj: {
					title: "万顷沙番石榴品鲜地图", // 分享标题
					desc: "进入“万顷沙番石榴星球”", // 分享描述
					imgUrl: "/static/dialog/friend.png", // 分享图标
				}
			}
		},
		components: {
			dialogCom: () => import("./component/dialog.vue")
		},
		onLoad() {
			this.getSkimNum();
			this.getList();
			this.$nextTick(() => {
				if(document.getElementById("tp-bg") && document.getElementById("tp-bg").offsetHeight > 0) this.bgHeight = document.getElementById("tp-bg").offsetHeight + 'px';
			})
			setTimeout(() => {
				if(document.getElementById("tp-bg") && document.getElementById("tp-bg").offsetHeight > 0) this.bgHeight = document.getElementById("tp-bg").offsetHeight + 'px';
			}, 2000)
			window.addEventListener('resize',this.handleResize,true);
			this.handleShareInfo();

		},
		methods: {
			// 网页缩放
			handleResize() {
				++this.refreshKey;
			},
			// 图片加载完成
			onImageLoad() {
				const interval = setInterval(() => {
					if(document.getElementById("tp-bg")) {
						this.$nextTick(() => {
							if(document.getElementById("tp-bg").offsetHeight > 0) this.bgHeight = document.getElementById("tp-bg").offsetHeight + 'px';
						})
						clearInterval(interval);
					}
				},500)
			},
			// 查看详情
			showDetail(info) {
				// console.log("详情", info)
				this.info = info;
				this.showDialog = true;
			},
			
			// 获取浏览量
			getSkimNum() {
				uni.request({
					url: this.$baseUrl + '/fruit/getSkimNum',
					method: 'GET',
					data: {
						pageNum: 1,
						pageSize: 999
					}
				}).then(([error, res]) => {
					console.log(res.data)
					if (res.statusCode === 200 && !res.data.code) {
						this.skimNum = res.data;
						localStorage.setItem("skimNum", this.skimNum);
					}
				})
			},
			
			// 获取列表
			getList() {
				uni.showLoading()
				uni.request({
					// url: 'http://192.168.3.14:8080/system/fruit'+ '/getFruitList',
					url: this.$baseUrl + '/fruit/getFruitList',
					method: 'GET',
					data: {
						pageNum: 1,
						pageSize: 999
					}
				}).then(([error, res]) => {
					console.log(res.data.msg)
					//result将返回一个数组[error,{NativeData}]
					//NativeData：调取接口后返回的原生数据
					if (res.statusCode === 200) {
						let {
							rows
						} = res.data;

						let mapper = {};


						rows.map((item, index) => {
							// console.log(locationMap.get(item.street), item.street)
							item.varietyList = JSON.parse(item.varietyList);
							if (mapper[item.street]) {
								item.orderNum = mapper[item.street].length;
								mapper[item.street].push(item);
							} else {
								item.orderNum = 0;
								mapper[item.street] = [item];
							}
							let _mapper = locationMap.get(item.street);
							let topDistance = item.top ||
								`calc(${_mapper ? _mapper().center[1] : '50' }% + ${randomChoice() * item.orderNum * (_mapper?.distance ? _mapper.distance : 6)}px)`
							let leftDistance = item.left ||
								`calc(${_mapper ? _mapper().center[0] : '50'}% + ${randomChoice() * item.orderNum * 1}px)`
							this.initMapList.push({
								styleObj: {
									left: (item.xaxis ? item.xaxis + '%' : item.xaxis) || (_mapper().pointList[item.orderNum] ? (_mapper()
										.pointList[item.orderNum][0] + '%') : leftDistance),
									top: (item.yaxis ? item.yaxis + '%' : item.yaxis) || (_mapper().pointList[item.orderNum] ? (_mapper().pointList[
										item.orderNum][1] + '%') : topDistance)
								},
								...item
							})

						})

						this.fruitList = [];

						Object.keys(mapper).forEach(key => {
								this.fruitList.push({
									street: key,
									streetList: mapper[key]
								})
							})
							++this.refreshKey;

						console.log(this.fruitList, this.initMapList)
					} else {
						uni.showToast({
							icon: 'none',
							title:  res.data.msg || '请求错误'
						})
					}
				}).finally(() => uni.hideLoading())
			},
		
			// 引入jssdk
			handleShareInfo() {
				this.$jwx.share(this.shareObj, this.$baseUrl + '/fruit/getWxInfo');
				// this.$jwx.initJssdkConfig(,).then((res) => {
					
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	$border-radius: 10px;

	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		// padding: 40rpx;
		font-family: PingFang SC;
		background-color: #f2e9d4;

		.img-icon-box {
			position: relative;
			width: 40rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;

			.img-icon {
				width: 40rpx;
				height: auto;
			}

			.icon-num {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 0px;
				line-height: 28rpx;
				color: #fff;
				font-size: 16rpx;
				font-weight: 400;
			}
		}


		.header-box {
			position: relative;
			width: 100%;
			
			.move-area,
			.movable-view {
				width: 100%;
				height: 100%;
			}

			.top-bg {
				width: 100%;
			}

			.map-icon {
				position: absolute;
				left: 100px;
				top: 100px;
			}
			
			.skim-box{
				position: absolute;
				top: 20px;
				left: 0;
				border-radius: 0rpx 99rpx 99rpx 0rpx;
				padding: 4rpx 15rpx;
				color: #fff;
				background: #FAAD14;
				font-size: 28rpx;
				box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.04);
			}
			
			.legend-box{
				position: absolute;
				bottom: 240rpx;
				left: 150rpx;
				padding: 10rpx;
				border-radius: 20rpx;
				background-color: rgba(0,0, 0, 0.10);
				.legend-item{
					display: flex;
					align-items: center;
					width: 100%;
					height: 50%;
					color: #000;
					font-size: 24rpx;
					margin-bottom: 10rpx;
					.lenged-icon{
						width: 30rpx;
						margin-right: 8rpx;
					}
				}
			}
		}

		.bottom-box {
			width: 100%;

			.bottom-bg {
				width: 100%;
			}
		}

		.content-list-box {
			width: 100%;
			margin-top: -220rpx;
			padding: 20px;
		}

		.list-box {
			position: relative;
			width: 100%;
			background-color: #fff;
			border-radius: 10px;
			padding: 80rpx 16rpx 16rpx 16rpx;
			box-shadow: 0px 20px 35px -30px rgba(208, 193, 161, 0.40);

			.banner {
				position: absolute;
				width: 100%;
				top: 0rpx;
				left: 0;
				transform: translateY(-65%);
			}

			.street-title {
				color: #005F36;
				font-size: 32rpx;
				font-weight: 900;
				margin-top: 20rpx;
			}
			
			.icon-num{
				font-size: 24rpx;
				line-height: 32rpx;
			}

			/deep/.u-cell {
				align-items: flex-start;
				padding: 10rpx 0;
			}

			/deep/.u-cell__value {
				text-align: left;
				color: #005F36;
				font-size: 14px;
				font-weight: 500;
			}

			/deep/.u-cell_title {
				max-width: calc(100% - 200rpx);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: #005F36;
				font-size: 32rpx;
				font-style: normal;
				font-weight: 500;
			}

			/deep/.u-cell_right {
				padding-top: 4rpx;
			}

			.detail-icon {
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				display: inline-flex;
				padding: 0rpx 10rpx;
				color: #fff;
				font-size: 24rpx;
				justify-content: center;
				align-items: center;
				gap: 8rpx;
				border-radius: 50rpx;
				background: #FAAD14;

				.right-arrow {
					width: 28rpx;
					margin-left: 4rpx;
				}
			}

		}
	}
</style>